import React, { Component } from "react";
import { Carousel } from "antd-mobile";
import propTypes from "prop-types";
import loading from "../../assets/images/loading.gif";

export default class Banner extends Component {

    // 设定默认值
    static defaultProps = {
        data: [loading],
        imgHeight: 176,
    };
    // 限定数据类型
    static propTypes = {
        data: propTypes.array,
        imgHeight: propTypes.number,
    };

    render() {
        let { data, imgHeight,style } = this.props;
        // let {data} = this.state;
        return (
            <div className="banner" style={style}>
                <Carousel autoplay infinite autoplayInterval="2000">
                    {data.map((val, index) => (
                        <div
                            key={index}
                            style={{
                                display: "inline-block",
                                width: "100%",
                                height: imgHeight,
                            }}
                        >
                            <img
                                src={val.image_src}
                                alt=""
                                style={{
                                    width: "100%",
                                    verticalAlign: "top",
                                    height: imgHeight
                                }}
                            />
                        </div>
                    ))}
                </Carousel>
            </div>
        );
    }
}
